@import "~scss/variables";

$sw-seo-url-template-card-color-preview: $color-darkgray-200;
$sw-seo-url-template-card-font-size-preview: $font-size-xs;

.sw-seo-url-template-card {
    .sw-sales-channel-switch {
        width: 100%;
    }

    .sw-loader {
        position: relative;
    }

    .sw-seo-url-template-card__preview {
        color: $sw-seo-url-template-card-color-preview;
        font-size: $sw-seo-url-template-card-font-size-preview;
    }

    .sw-seo-url-template-card__preview-label {
        margin: 10px 0 8px;
        display: block;
        line-height: 16px;
        font-weight: normal;
        user-select: none;
    }
}

.sw-seo-url-template-card__seo-url {
    margin-bottom: 32px;

    &:last-child {
        margin-bottom: 0;
    }

    .sw-field {
        margin-bottom: 0;
    }

    .sw-field__addition .mt-icon {
        width: $font-size-s;
        height: $font-size-s;
        line-height: $font-size-s;

        &.icon--regular {
            &-checkmark {
                color: $color-emerald-500;
            }

            &-exclamation-triangle {
                color: $color-pumpkin-spice-500;
            }

            &-times {
                color: $color-crimson-500;
            }
        }
    }
}
